<template>
    <div style="margin: 5px 20px;">   

        <el-form :model="fromlist" label-position="left" label-width="55px">
      
          <el-form-item label="标题" >
            <el-input v-model="fromlist.title" autocomplete="off"  ></el-input>
          </el-form-item>
          <el-form-item label="发布人" >
            <el-input v-model="fromlist.person" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" >
           
      <div style="width: 100%; margin:0px 0px;height: 280px;">
        <quill-editor
          v-model="fromlist.content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
          @ready="onEditorReady($event)"
          style="height: 230px;"
        >
        </quill-editor>

        
      </div>


          </el-form-item>
      
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: 50px;">
          <el-button @click="adddrafts" v-if="tabindex==2">存为草稿</el-button>
          <el-button type="primary" @click="addonSubmit(0)" v-if="tabindex==2">发送</el-button>
          <el-button type="primary" @click="addonSubmit(1)" v-if="tabindex!=2">保存</el-button>
        </div>

    </div>
  </template>
   
  <script>
  import { quillEditor } from "vue-quill-editor";
  export default {
    name: "HomeView",
    components: { quillEditor },
    props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    index: {
      default: () => {
        return ""
      },
    }
  },

    data() {
      return {
        //这个表示是页面的组件 还是模态框的 如果是模态框的则不显示下面的存为草稿和页面的数
        tabindex:2,
        TiLength:0,
        fromlist:{

          title:"",
          person:"",
          content:"",
         
          
        },
        formLabelWidth:"100",
        // 富文本编辑器配置
 editorOption: {
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            // ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            // [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [
              {
                size: [
                  "12",
                  "14",
                  "16",
                  "18",
                  "20",
                  "22",
                  "24",
                  "28",
                  "32",
                  "36",
                ],
              },
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            // ["image", "video"], // 链接、图片、视频
          ],
        },
        placeholder: "请输入正文",
      },

      };
    },
    // watch: {
    //   data: function (newVal, oldVal) {
    //     console.log(newVal)
    //     this.formData = newVal;
    //   }
    // },
    created(){
      // this.fromlist=this.data.manager
      // console.log(this.data.manager)
      console.log("子组件传过来的数据")
      console.log(this.data.manager)
      if(this.data.manager){
       this.fromlist=this.data.manager
      }
      else{
        console.log("没有数据")
      }
      //  console.log("this.index的值为"+this.index)
      //  console.log(typeof(this.index))
          //发布公告的是空
      //模态框传过来的是0
      // 已发布传过来的是1
    
       //在赋值0的时候 老是有问题 所以就是使用类型来判断
      if(typeof(this.index)=="number"){
        // console.log("this.tabindex赋值成功")
        this.tabindex=this.index
      }
      // console.log("this.tabindex的值为"+this.tabindex)
    
   

    },
   
    methods: {
//没有非空判断
  //发送的接口
        addonSubmit(tabindex){
          var url=""
          var time=this.timestampToTime(new Date(),2)
         var params={};
         var text=""
         console.log("发布和编辑的状态")
         console.log(tabindex)
      
          if(tabindex==0){
              url="/notice/insertNotice"
              params={
              title:this.fromlist.title,
              content:this.fromlist.content,
              time:time,
              person:this.fromlist.person
            }
            text="发布成功"
          }
          else{
            url="/notice/updateDraft"
            params={
              id:this.fromlist.id,   
              savetime:time,
              title:this.fromlist.title,
              content:this.fromlist.content,
              person:this.fromlist.person
            }
            text="编辑成功"
          }
          // 如果是编辑的发送必须传入参数
          
          this.$confirm('是否确定发送', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '提交',
          cancelButtonText: '取消'
        }).then(res=>{
         
          console.log(this.fromlist)
          console.log(time)
          this.axios({
             url:this.$api+url, 
             dataType:"json",
            //  String title,String content,String time,String person
            params:params,
            }).then(res=>{
              console.log("成功过")
              console.log(res)
                 if(res.data>0){
                  this.$message({
             message: text,
            type: 'success'
            })   

            this.$emit("numchange",1)

             this.fromlist={}
                 }
            }).catch(res=>{
              console.log("失败")
              console.log(res)
            })
        }).catch(res=>{})
         
           





        },
        //添加草稿箱的接口

        adddrafts(){
         console.log("添加草稿")

   

          var time=this.timestampToTime(new Date(),2)
          console.log(this.fromlist)
          console.log(time)
          this.axios({
             url:this.$api+"/notice/insertDraft", 
             dataType:"json",
            //  String title,String content,String person,String savetime
            params:{
              title:this.fromlist.title,
              content:this.fromlist.content,
              savetime:time,
              person:this.fromlist.person
            },
            }).then(res=>{
              this.$message({
             message: "保存成功",
            type: 'success'
            })   
            }).catch(res=>{
              console.log(res)
            })
        },


      onSubmit() {
        console.log(this.content);
      },
      // 失去焦点事件
      onEditorBlur(quill) {
      
      },
      // 获得焦点事件
      onEditorFocus(quill) {
        // console.log("editor focus!", quill);
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        // console.log("editor ready!", quill);
      },
      // 内容改变事件(将html内容传给content)
      onEditorChange({ quill, html, text }) {
        // console.log("editor change!", quill, html, text);
        this.content = html;
      },
      timestampToTime(times,num) {
     //num是判断是否返回时分秒 num=1为不传时分秒 num=2返回时分秒
    times=times.toLocaleString('en-US',{hour12: false}).split(" ")
    let time = times[1]
    let mdy = times[0]
    mdy = mdy.split('/')
    let month = parseInt(mdy[0]);
    let day = parseInt(mdy[1]);
    let year = parseInt(mdy[2])
    if(month<10){
        console.log(month)
        month="0"+month
      
    }
    if(day<10){
        day="0"+day
    }

    //是否传回时分秒 num=1为不传时分秒 num=2返回时分秒
  if(num==1){
    return  year + '-' + month + '-' + day 
  }
  else{
    return  year + '-' + month + '-' + day + ' ' + time
  }
 
   

},


 


    },
  };
  </script>
  <style>
 

  </style>
  